<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<header-custom title="一分一段" />
		<view>
			<u-tabs lineColor="#00C15D" :scrollable="false" :list="navList" :current="navIndex" keyName="title" itemStyle="height:88rpx;"
				@click="onTabChange"></u-tabs>
			<view class="space-block"></view>
			<view class="fboxRow item Ycenter Xcenter font24 color-9899A1">
				<view class="flex1 fboxRow Ycenter Xcenter">分数</view>
				<view class="flex1 fboxRow Ycenter Xcenter">分段人数</view>
				<view class="flex1 fboxRow Ycenter Xcenter">累计人数</view>
			</view>
			<block v-for="(item, index) in dataList" :key="index">
				<view class="fboxRow item Ycenter Xcenter font26 color-36363A">
					<view class="flex1 fboxRow Ycenter Xcenter">{{item.score || '0'}} <text
							class="color-9899A1">分</text></view>
					<view class="flex1 fboxRow Ycenter Xcenter">{{item.number || '0'}} <text
							class="color-9899A1">人</text></view>
					<view class="flex1 fboxRow Ycenter Xcenter">{{item.totalNumber || '0'}} <text
							class="color-9899A1">人</text></view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import headerCustom from '@/pagesBKS/components/header-custom.vue';
	import {
		scoreAnalysisPiecewise
	} from '@/api/bks.volunteer.js'
	export default {
		components: {
			headerCustom
		},
		data() {
			return {
				theme: 'bks-theme',
				globalColor: getApp().globalData.globalColor,
				navIndex: 0,
				navList: [{
					title: '物理类',
					name: 1
				}, {
					title: '历史类',
					name: 2
				}],
				dataList: [],
				loading: 'none',
				examId: "KS202303150000",
				isHighExam: false
			}
		},
		onLoad(options) {
			if (options && options.examId) {
				this.examId = options.examId
				this.isHighExam = options.isHighExam
				this._request()
			}
		},
		methods: {
			onTabChange(e) {
				this.navIndex = e.index
				this._request()
			},
			_request() {
				this.loading = true
				scoreAnalysisPiecewise({
					type: this.navList[this.navIndex].name,
					examId: this.examId,
					isHighExam: this.isHighExam
				}).then(res => {
					this.dataList = res.data
				}).finally(() => {
					this.loading = false
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.item {
		height: 80rpx;
	}
</style>